<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :class="{disabled : fileListIsOne}"
      :limit="1"
      :on-change="change"
      :http-request="upload"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-progress v-if="showPercent" :percentage="percent" style="width: 180px" />
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
let cos = new COS({
  SecretId: "AKIDITSEl391f4HG2av50g7MNAj38yZv2uXu",
  SecretKey: "HK8i4C5j8IEwRhiT0JNBk49zay83jCQQ"
});
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      percent: 0, // 当前的百分比
      showPercent: false,
      fileList: []
    };
  },
  methods: {
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePictureCardPreview(file) {
      //当前预览图片
      this.dialogImageUrl = file.url;
      //打开对话款
      this.dialogVisible = true;
    },
    change(file, fileList) {
      this.fileList = fileList.map(item => item);
    },
    beforeUpload(file) {
      const type = [
        "image/jpg",
        "image/jpeg",
        "image/webp",
        "image/gif",
        "image/bmp"
      ];
      const size = 4 * 1024 * 1024;
      if (!type.some(item => item == file.type)) {
        this.$message.error("图片只支持jpg,jpeg,wepb,bmp,gif");
        return false;
      }
      if (file.size > size) {
        this.$message.error("图片大小超过4M");
        return false;
      }
      this.cid = file.uid;
      this.showPercent = true;
      return true;
    },
    //图片上传腾讯云
    upload(params) {
      cos.putObject(
        {
          Bucket: "hr-1305765996" /* 填入您自己的存储桶，必须字段 */,
          Region: "ap-nanjing" /* 存储桶所在地域，例如ap-beijing，必须字段 */,
          Key:
            params.file
              .name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
          StorageClass: "STANDARD",
          Body: params.file, // 上传文件对象
          onProgress: progressData => {
            this.percent = progressData.percent * 100;
            if (this.percent == 100) {
              this.showPercent = false;
              this.percent = 0;
            }
          }
        },
        (err, data) => {
          if (!err && data.statusCode == 200) {
            this.fileList = this.fileList.map(item => {
              if (item.uid == this.cid) {
                return {
                  url: "http://" + data.Location,
                  uid: this.cid,
                  name: params.file.name,
                  upload: true
                };
              }
            });
          } else {
            this.$message.error("上传失败!");
          }
        }
      );
    }
  },
  computed: {
    fileListIsOne() {
      return this.fileList.length === 1;
    }
  }
};
</script>
<style>
.disabled div.el-upload--picture-card {
  display: none;
}
</style>